<template>
  <div class="detail_box">
    <!-- 轮播图区域 -->
    <div class="swipe">
      <van-swipe :autoplay="1500">
        <van-swipe-item v-for="(image, index) in swipeData" :key="index">
          <img :src="image.src" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 购买区域 -->
    <div class="buy_box">
      <p>{{ goodsData.title }}</p>
      <div>
        <s>市场价：￥{{ goodsData.market_price }}</s>
        <span>
          销售价
          <b>￥{{ goodsData.sell_price }}</b>
        </span>
      </div>
      <div>
        购买数量
        <van-stepper v-model="value" integer />
      </div>
      <div>
        <van-button class="btnBuy" size="normal" type="info">立即购买</van-button>
        <van-button size="normal" type="danger" @click="shopCartAdd">加入购物车</van-button>
      </div>
    </div>
    <div class="goods_params">
      <h3>商品参数</h3>
      <span>商品货号：{{ goodsData.goods_no }}</span>
      <span>库存情况：{{ goodsData.stock_quantity }}件</span>
      <span>上架时间：{{ goodsData.add_time | dateFormat }}</span>
      <div class="btns">
        <van-button plain type="info" size="large">图文介绍</van-button>
        <van-button plain type="danger" size="large">商品评论</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Toast } from 'vant'

Vue.use(Toast)

export default {
  props: ['id'],
  data() {
    return {
      goodsData: [],
      swipeData: [],
      value: 1
    }
  },
  created() {
    this.getGoodsDetailData()
    this.getSwipeData()
  },
  methods: {
    async getGoodsDetailData() {
      const { data: res } = await this.$http.get(
        `/api/goods/getinfo/${this.id}`
      )
      if (res.status !== 0) {
        return this.$toast('刷新失败')
      }
      ;[this.goodsData] = res.message
    },
    async getSwipeData() {
      const { data: res } = await this.$http.get(
        `/api/getthumimages/${this.id}`
      )
      if (res.status !== 0) {
        return this.$toast('刷新失败')
      }
      this.swipeData = res.message
    },
    shopCartAdd() {
      let obj = {
        id: this.id,
        count: this.value,
        price: this.goodsData.sell_price,
        selected: true
      }
      this.$store.commit('addGoodsIdArr', obj)
      console.log(this.value, this.id)
      Toast.success('已加入购物车')
    }
  }
}
</script>

<style lang="less" scoped>
.detail_box {
  padding: 50px 10px 60px;
  .swipe {
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-bottom: 10px;
    .van-swipe-item {
      display: flex;
      justify-content: center;
      padding-bottom: 10px;
      img {
        widows: 200px;
        height: 200px;
      }
    }
  }
  .buy_box {
    height: 190px;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 0 10px;
    margin-bottom: 10px;
    //   background-color: pink;
    > p {
      border-bottom: 1px solid #ccc;
    }
    div:nth-of-type(1) {
      padding-left: 5px;
      color: #8f8f94;
      font-size: 14px;
      span {
        margin-left: 10px;
        b {
          color: red;
        }
      }
    }
    div:nth-of-type(2) {
      margin: 10px 10px;
      color: #8f8f94;
      font-size: 14px;
      display: flex;
      align-items: center;
      .van-stepper {
        margin: 0 10px;
      }
    }
  }
  .btnBuy {
    margin: 0 10px;
  }
  .goods_params {
    display: flex;
    flex-direction: column;
    height: 330px;
    border-radius: 5px;
    padding: 0 10px;
    border: 1px solid #ccc;
    h3 {
      padding-bottom: 10px;
      border-bottom: 1px solid #ccc;
    }
    span {
      color: #8f8f94;
      margin: 5px 10px;
    }
    .btns {
      display: flex;
      flex-direction: column;
      margin-top: 20px;
      border-top: 1px solid #ccc;
      .van-button {
        margin-top: 10px;
      }
    }
  }
}
</style>
